<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="../../css/fullcalendar.css" />
    <link rel="stylesheet" href="../../css/unicorn.main.css" />
    <link rel="stylesheet" href="../../css/unicorn.grey.css" class="skin-color" />
    <script src="../lib/jquery.min.js"></script>
    <script src="../lib/bootstrap.min.js"></script>
    <script src="../lib/angualrjs.min.js"></script>
</head>
<body bgcolor="buttonface">
<div id="header">
    <h1><a href="extends.html">Area</a></h1>
</div>

<div id="sidebar">
    <ul id="uu">
        <li><a href="../../index.html">><i class="icon icon-th-list"></i> <span>TypeScript-Learn</span></a></li>
        <li><a href="hello.html">><i class="icon icon-th-list"></i> <span>Hello TypeScript</span></a></li>
        <li><a href="area.html">><i class="icon icon-th-list"></i> <span>Area</span></a></li>
        <li><a href="interface.html">><i class="icon icon-th-list"></i> <span>Interface</span></a></li>
        <li><a href="lambda.html">><i class="icon icon-th-list"></i> <span>lambda 表达式</span></a></li>
        <li><a href="class.html">><i class="icon icon-th-list"></i> <span>Class</span></a></li>
        <li><a href="extends.html">><i class="icon icon-th-list"></i> <span>Extends</span></a></li>
    </ul>
</div>

<div id="content">
    <div> <h1>按键F12，控制台将会打印如下内容</h1></div>
    <div><img src="../../img/demo/extends.png"/></div>
    <div>
        <p>派生类 Shape3D 说明：</p>
        <ul>
            <li>
                Shape3D 继承了 Shape 类, 也继承了 Shape 类的  color 属性。
            </li>
            <li>
                构造函数中，super 方法调用了基类 Shape 的构造函数 Shape，传递了参数 name, width, 和 height 值。
                继承允许我们复用 Shape 类的代码，所以我们可以通过继承 area 属性来计算 this.volume。
            </li>
            <li>Shape3D 的 shoutout() 方法重写基类的实现。superShout() 方法通过使用 super 关键字直接返回了基类的 shoutout() 方法。</li>
        </ul>
    </div>
    <hr>
    <pre>
        <code>
            class Shape {

            area: number;
            public color: string;


            constructor (public  name: string , public width: number, public height: number ) {
            this.area = width * height;
            this.color = "pink";
            }

            shoutout() {
            return "I'm " + this.color + " " + this.name +  " with an area of " + this.area + " cm squared.";
            }
            }
            class Shape3D extends Shape {

            volume: number;

            constructor ( public name: string,public width: number,public height: number, public length: number ) {
            super( name, width, height );
            this.volume = length * this.area;
            };

            shoutout() {
            return "I'm " + this.name +  " with a volume of " + this.volume + " cm cube.";
            }

            superShout() {
            return super.shoutout();
            }
            }

            var cube = new Shape3D("cube", 30, 30, 30);
            console.log( cube.shoutout() );
            console.log( cube.superShout() );

        </code>
    </pre>

</div>


<script src="extends.js"></script>
</body>
</html>
